<template>
	<el-container direction="vertical">
		<SearchForm :columns="formColumn" @search="search" @reset="search" />
		<el-header>
			<div class="left-panel">
				<el-button type="primary" icon="el-icon-plus" @click="drawer.show_add = true" class="mr10">
					添加套餐
				</el-button>
				<!-- <el-button type="danger" @click="deleteStudentHandle">删除</el-button> -->
			</div>
		</el-header>
		<AddClass v-if="drawer.show_add" @close="drawer.show_add = false" @success="search" />

		<el-main class="nopadding">
			<scTable ref="table" tableName="studentList" v-bind="list" row-key="id" stripe :vritualData="vritualData">
				<el-table-column type="selection" width="50"></el-table-column>
				<!-- <template #name="scope">
					<el-link :underline="false" type="primary" :href="`#/teach/package/detail/${scope.row.id}`">{{ scope.row.name
					}}</el-link>
				</template>-->
				<template #startUsing="scope">
					{{ scope.row.startUsing == 0 ? '启用': '停用'}}
				</template> 
				<el-table-column
					label="操作"
					width="120"
					fixed="right"
					align="center"
				>
					<template #default="scope">
						<el-button class="mtb5" plain size="small" @click="stopUsing(scope.row)">
							{{scope.row.startUsing == 0 ? "停用" : "启用"}}
						</el-button>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>
</template>
<script>
import AddClass from "./addPackage/index.vue";
import SearchForm from "@/components/SearchForm/index.vue";
import { formColumn, column } from "./date";
import { ElMessageBox, ElMessage } from "element-plus";
export default {
	data() {
		return {
			formColumn,
			list: {
				apiObj: this.$API.teaching.getMenulist,
				params: {},
				column,
			},
			drawer: {
				show_add: false,
			},
			vritualData: [
				{
					name: '2022五一双科优惠班',
					school: '2022-5-21至2022-6-30',
					price: '有效',
					familyPhone: '50',
					age: '2022-5-20 19:35:42',
					level: '2022-6-20 15:56:45',
					pendCount: '启用',
				},
				{
					name: '美发-高薪就业系列套餐',
					school: '2022-4-18至2022-6-21',
					price: '有效',
					familyPhone: '25',
					age: '2022-3-20 16:32:42',
					level: '2022-4-15 14:54:45',
					pendCount: '启用',
				},
				{
					name: '测试优惠套餐',
					school: '2022-2-18至2022-3-21',
					price: '无效',
					familyPhone: '102',
					age: '2022-7-20 16:32:42',
					level: '2022-8-15 14:54:45',
					pendCount: '停用',
				}
			]
		}
	},
	components: {
		SearchForm,
		AddClass,
	},
	mounted(){
		console.log(123)
	},
	methods: {
		stopUsing(row) {
			ElMessageBox.confirm(`确定要${row.startUsing == 0 ? '停用' : '启用'}该套餐?`, "提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
				buttonSize: "default",
			})
				.then(() => {})
				.catch(() => {});
		},
		search(searchParams) {
			const params = Object.assign({}, this.list.params, searchParams);
			this.$refs.table.reload(params);
		},
		addStudent() {
			this.visible = true;
		},
		deleteStudentHandle() { }
	},
}
</script>
<style lang="scss" scoped>
.mr10 {
	margin-right: 10px;
}
</style>